<template>
  <div class="chuantu" style="position: relative;">
    <el-upload class="avatar-uploader " action="#" :on-change="uploadok" :auto-upload="false" >
      <el-button type="primary">{{wenzi}}</el-button>
      <div style="width: 100%; height: 100%;" v-if="imgurl">
        {{imgurl}}
      </div>
    </el-upload>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'chuantu',
    props:['imgid','zi'],
    data() {
      return {
        imgurl:"",
        wenzi:"上传"
      }
    },
    created() {
      if(this.imgid){
        this.imgurl = this.imgid
      }
      if(this.zi){
        this.wenzi = this.zi
      }
    },
    methods: {

      //上传图
      uploadok:function(file){
        let data = new FormData()
        data.append('file',file.raw)
        axios.post(this.IP_URL+'/index/upload',data).then((response)=>{
          if(response.data.msg.code == 0){
            this.imgurl = response.data.data.url
            this.$emit('getimgid',response.data.data.url)
          } else {
            this.$message.error(response.data.reason);
          }
        })
      },

    }
  }
</script>


<style scoped lang="less">
  // /deep/ .el-upload--text{ width: 100%; height: 100%;}
  /deep/ .el-upload{ text-align: left;}
</style>
